  <template>
  <div class="Order">
    <el-row :gutter="3" class="top">
      <el-col :span="6">
        搜索
        <el-input
          size="default"
          placeholder="搜索订单/乘车人/类型"
          v-model="val"
          @change="() => getlist()"
        />
      </el-col>
      <el-col :span="8">
        车次类型
        <el-select
          v-model="type"
          class="m-2"
          placeholder="Select"
          size="default"
          @change="
            () => {
              getlist();
            }
          "
        >
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-col>
      <el-col :span="6">
        状态
        <el-select
          v-model="state"
          class="m-2"
          placeholder="Select"
          size="default"
          @change="
            () => {
              getlist();
            }
          "
        >
          <el-option
            v-for="item in options1"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="$router.push('/addorders')"
          >创建订单</el-button
        >
      </el-col>
    </el-row>
    <Table @getlist="getlist" :tableData="tableData" />
    <el-pagination
      :page-count="PageCode"
      :current-page="pageSize"
      :page-sizes="[3, 5, 8, 10]"
      small="small"
      :disabled="disabled"
      class="page"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import Table from "./components/Table.vue";
import { HttpTicket } from "api";

export default {
  components: { Table },
  props: { type1: Boolean },
  data() {
    return {
      de: null,
      val: "",
      pageCode: 10,
      pageSize: 1,
      total: 1,
      value1: "",
      tableData: [],
      type: "全部",
      state: "全部",
      options: ["全部", "软卧", "硬卧", "硬座", "软座"],
      options1: ["全部", "停用", "启用"],
    };
  },
  methods: {
    async getlist() {
      const form = {
        val: this.val,
        pageSize: this.pageSize,
        pageCode: this.pageCode,
        type: this.type,
        state: this.state,
      };
      const res = await HttpTicket({
        ...form,
      });
      console.log(res.data) 
      this.tableData = res.data.data;
      this.total = res.data.total;
    },
    ChangeDate(e) {
      this.date = e[0] === "" ? "" : e[0];
      this.date1 = e[1] === "" ? "" : e[1];
      this.getlist();
    },
    handleSizeChange(e) {
      this.pageCode = e;
      this.getlist();
    },
    handleCurrentChange(e) {
      this.pageSize = e;
      this.getlist();
    },
  },
  mounted() {
    this.getlist();
  },
};
</script>

<style lang='scss' scoped >
.top {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 13px;
  a {
    float: left;
    padding-right: 5px;
  }
  .el-input {
    width: 80%;
  }
  .el-select {
    width:75%;
  }
  .el-button{
    width: 60%;
  }
}
.page {
  margin: 20px auto;
  float: right;
}
.Order {
  background-color: #fff;
  border-radius: 7px;
  padding: 10px 0px 50px 10px;
}
</style> 